<template>
  <div class="password-edit page" ref="webview">
    <div ref="wrapper">
      <van-nav-bar class="bg_white" :title="type === 1 ? '修改密码': type === 2 ?'支付密码':'忘记密码'" left-arrow @click-left="$router.go(-1)" />
      <div class="text" v-if="type===1">请先输入原登录密码进行验证</div>
      <div class="text" v-if="type===2 && userInfo.isSetPayPass===0">您未设置支付密码,请先设置支付密码</div>
      <div class="password">
        <template v-if="type === 1">
          <van-field v-model.number="form.oldPass" clearable :maxlength="type === 2?6:20" type="password" input-align="right" label="原密码" placeholder="请输入原登录密码" />
          <van-field v-model="form.password" :maxlength="type === 2?6:20" clearable input-align="right" type="password" label="新密码" placeholder="请输入新密码" />
          <van-field v-model="confPass" :maxlength="type === 2?6:20" clearable input-align="right" type="password" label="确认密码" placeholder="请确认新密码" />
        </template>
        <template v-else-if="type === 2">
          <!-- <van-field :value="userInfo.member_no" readonly></van-field> -->
          <van-field v-model.number="form.oldPass" clearable :maxlength="type === 2?6:20" type="password" input-align="right" label="登录密码" placeholder="请输入登录密码" />
          <van-field v-model="form.password" :maxlength="type === 2?6:20" clearable type="password" input-align="right" label="支付密码" placeholder="请输入密码（6位数字）" />
          <van-field v-model="confPass" :maxlength="type === 2?6:20" clearable label-width="95" type="password" input-align="right" label="确认支付密码" placeholder="请确认密码（6位数字）" />
        </template>
        <template v-else-if="type === 3">
          <van-field v-model="form.mobile" clearable placeholder="请输入手机号码" />
          <van-field v-model="form.code" maxlength="4" clearable placeholder="请输入验证码">
            <span slot="button" class="code" :class="{disable: !disable}" @click="getCode">{{count?count + 's': codeText}}</span>
          </van-field>
          <van-field v-model="form.password" :maxlength="type === 2?6:20" clearable type="password" placeholder="请输入新密码" />
        </template>
      </div>
      <div class="addCard">
        <van-button class="btn" round :loading="isLoading" @click.native="submitEdit">提 交</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'passwordEdit',
  data () {
    return {
      text: '',
      isLoading: false,
      disable: true,
      isPasswordType: false,
      confirmPpassword: '',
      colde: '',
      codeText: '发送验证码',
      count: '',
      timer: null,
      confPass: '',
      form: {
        oldPass: '',
        password: '',
        type: this.$route.query.type + '' // 密码类型
      }
    };
  },
  created () {
  },
  computed: {
    ...mapGetters(['userInfo']),
    type () {
      return parseInt(this.$route.query.type);
    }
  },
  methods: {
    getSMS () {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.disable = false;
        this.timer = setInterval(() => {
          this.count && (this.codeText = '重新获取');
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.disable = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码
    getCode () {
      var mobile = (this.type === 2 ? this.userInfo.member_no : this.form.mobile);
      var isPhone = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(mobile));
      if (isPhone) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      if (!this.disable) {
        return;
      }
      // this.getSMS();
      this.$API.user.sendMsg({
        mobile: mobile + '',
        type: this.type === 3 ? 5 : 1
      }).then(res => {
        if (res.code === -1) {
          this.$toast(res.message);
        } else {
          this.getSMS();
          this.$toast('验证码发送成功,请注意查收');
        }
      });
    },
    submitEdit () {
      if (this.isLoading) {
        return;
      }
      var _account = this.form.oldPass + '';
      var _password = this.form.password + '';
      if (this.type !== 3) {
        if (!_account) {
          this.$toast('旧密码不能为空');
          return;
        }
      }
      if (this.type === 3) {
        if (!this.form.code) {
          this.$toast('验证码不能为空');
          return;
        }
      }
      if (!_password) {
        this.$toast('密码不能为空');
        return;
      }
      if (this.type !== 3) {
        if (!this.confPass) {
          this.$toast('确认密码不能为空');
          return;
        }
        if (this.form.password !== this.confPass) {
          this.$toast('两次密码输入的不一致!');
          return;
        }
      }
      // debugger;
      var options = this.form;
      this.isLoading = true;
      this.$API.user[this.type === 3 ? 'forgotPassword' : 'updatePass'](options).then((res) => {
        if (!res.code) {
          this.$toast('修改成功!');
          this.type === 2 && this.$store.dispatch('setUserInfo'); // 更新密码判断
          this.$router.go(-1);
        }
        this.isLoading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.password-edit {
  .textName {
    background-color: #f1f3f7;
    line-height: 76px;
    padding: 0 40px;
    color: #252525;
  }
  .text {
    padding: 24px 38px 0;
    color: #5f5e5e;
    font-size: 26px;
  }
  .code {
    background: linear-gradient(80deg, #51b3f5 0%, #2560e1 100%);
    border-radius: 50px;
    font-size: 24px;
    padding: 5px 20px;
    display: inline-block;
    color: #fff;
  }
  .code.disable {
    background-color: #dbdee6;
  }
  .password {
    margin-top: 20px;
  }
  .addCard {
    color: #fff;
    font-size: 32px;
    text-align: center;
    margin: 40px 30px;
    // position: fixed;
    // bottom: calc(60px + env(safe-area-inset-bottom));
    // left: 60px;
    // right: 60px;
    .btn {
      width: 100%;
      background-color: #fff;
      color: #111;
      line-height: 40px;
      border: none;
    }
    .van-button__text {
      color: #125dff;
      font-size: 32px;
      &::before {
        display: inline-block;
        font-size: 40px;
        margin-right: 10px;
      }
    }
  }
}
</style>
